<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>根据组别获取委员</title>
</head>

<body>
<h2>选择一个组别</h2>
<select id="subsectorSelect" onchange="updateMembersList()">
</select>

<h2>Members List</h2>
<ul id="membersList">
</ul>

<script>
  // 使用fetch API获取JSON文件
  let membersData = []
  // 创建一个集来存储唯一的 subsectors
  let uniqueSubsectors = new Set();
  async function getJson() {
    try {
      let response = await fetch('/json/members.json');
      membersData = await response.json();
    } catch (error) {
      console.log('获取操作时出现了一个问题：', error.message);
    }
    // await fetch('/json/members.json')
    //         .then(response => {
    //           // 检查响应是否成功
    //           if (!response.ok) {
    //             throw new Error('网络响应不好');
    //           }
    //           return response.json();
    //         })
    //         .then(data => {
    //           // 在这里处理您的JSON数据
    //           console.log(data);
    //           const membersData = data
    //         })
    //         .catch(error => {
    //
    //         });
  }







  // Function to populate the subsector dropdown
  function populateSubsectorDropdown() {
    const dropdown = document.getElementById('subsectorSelect');
    uniqueSubsectors.forEach(subsector => {
      const option = document.createElement('option');
      option.value = subsector;
      option.textContent = subsector;
      dropdown.appendChild(option);
    });
  }

  // Function to update the members list based on selected subsector
  function updateMembersList() {
    const selectedSubsector = document.getElementById('subsectorSelect').value;
    const membersList = document.getElementById('membersList');

    // Clear the current list
    membersList.innerHTML = '';

    // Filter members based on the selected subsector
    const filteredMembers = selectedSubsector? membersData.filter(member => member.subsector_name === selectedSubsector) : membersData;

    // Populate the members list
    filteredMembers.forEach(member => {
      const listItem = document.createElement('li');
      listItem.textContent = member.china_name;
      membersList.appendChild(listItem);
    });
  }



  async function initializeApp() {
    await getJson();
    // 填充唯一的 subsectors
    membersData.forEach(member => {
      // console.log(member)
      uniqueSubsectors.add(member.subsector_name)
    });
    // 初始化下拉列表和成员列表

    updateMembersList();
    populateSubsectorDropdown();


  }

  initializeApp()
</script>
</body>

</html>
